<template>
  <div>
    <el-row class="warp">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }"><b>机构管理</b></el-breadcrumb-item>
          <el-breadcrumb-item>发票管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--工具条-->
        <el-row  :span="24" class="query-form">
          <el-col :span="24">
            <el-form :inline="true" :model="filters">
              <el-form-item class="query-el-form-item">
                <el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;"
                          @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
              <el-form-item  class="query-el-form-item" style="float: right">
                <el-button type="primary" @click="handleSearch">查询</el-button>
              </el-form-item>
              <el-form-item  class="query-el-form-item" style="float: right">
                <el-button type="primary" @click="invoiceUploadDialogVisible = true">发票上传</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <!--列表-->
        <el-table :data="domainList" highlight-current-row v-loading="loading" style="width: 100%;">
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="invoiceNum" label="发票号码">
          </el-table-column>
          <el-table-column prop="invoiceCode" label="发票代码">
          </el-table-column>
          <el-table-column prop="buyerEnterpriseName" label="购方机构名称" width="100">
          </el-table-column>
          <el-table-column prop="buyerTaxNum" label="购方税号" min-width="160">
          </el-table-column>
          <el-table-column prop="bankAcct" label="银行帐号">
          </el-table-column>
          <el-table-column prop="addressTel" label="地址电话" width="100">
          </el-table-column>
          <el-table-column prop="printDate" label="开票日期">
          </el-table-column>
          <el-table-column prop="goodsVersion" width="120px" label="商品编码版本号">
          </el-table-column>
          <el-table-column prop="docNum" label="单据号" width="100">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" min-width="160">
          </el-table-column>
          <el-table-column prop="spec" label="规格">
          </el-table-column>
          <el-table-column prop="unit" label="单位" width="100">
          </el-table-column>
          <el-table-column prop="quantity" label="数量">
          </el-table-column>
          <el-table-column prop="price" label="单价">
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="100">
          </el-table-column>
          <el-table-column prop="taxAmount" label="税额" min-width="160">
          </el-table-column>
          <el-table-column prop="taxClassCode" label="税收分类编码">
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" width="100">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount">
      </el-pagination>
    </el-row>
    <el-dialog title="发票上传" :visible.sync="invoiceUploadDialogVisible" width="500px">
      <div style="min-height: 300px">
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="1"
          :headers="headOb"
          :action="baseUrl + '/invoiceInfo/upload'"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :auto-upload="false">
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过2M</div>
          <el-button slot="trigger" size="small" type="primary">选取发票文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="invoiceUploadDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import domainAPI from '@/api/api_invoice';

  export default {
    data() {
      return {
        invoiceUploadDialogVisible: false,
        headOb: {'authToken': localStorage.getItem('authToken')},
        filters: {
          name: ''
        },
        baseUrl: this.$proper.baseUrl,
        page: {
          pageSize: 10,
          pageNumber: 1,
          totalCount: 0
        },
        domainList: [],
        loading: false
      }
    },
    methods: {
      handleSearch() {
        this.page.totalCount = 0;
        this.page.pageNumber = 1;
        this.search();
      },
      //获取资源列表
      search: function () {
        let that = this;
        let params = {
          name: that.filters.name
        };
        Object.assign(params, this.page)
        that.loading = true;
        domainAPI.qryByPage(params).then(function (result) {
          that.loading = false;
          if (result) {
            that.page.totalCount = result.data.totalCount;
            that.domainList = result.data.result;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize
        this.search()
      },
      handleCurrentChange(pageNumber) {
        this.page.pageNumber = pageNumber
        this.search()
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        alert(222)
        console.log(file)
      },
      beforeAvatarUpload(file){
        console.error(file)
        let fileName = file.name
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!this.isElcel(fileName)) {
          this.$message.error('上传文件只能是 xls,xlsx 格式!');
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 2MB!');
          return false
        }
        return true
      },
      isElcel(fileName){
        var suffix = fileName.substr(fileName.lastIndexOf("."));
        if(".xls" != suffix && ".xlsx" != suffix ){
          return false;
        }
        return true;
      }
    },
    mounted() {
      this.handleSearch()
    }
  }
</script>

<style scoped>

</style>
